<!--此组件用于上传排产数据以供后台处理成排程模型-->
<template>
  <div class="mod-config">

  <el-button type="primary" @click="uploadHandle()">上传文件</el-button>

  <el-dialog
    title="上传排产文件"
    :close-on-click-modal="false"
    @close="closeHandle"
    :visible.sync="visible">

    <el-form>
    <el-input v-model="input" placeholder="请输入排产标识" v-on:change="change" clearable ></el-input>
    </el-form>
    <el-upload
      :action="init()"
      ref="upload"
      :limit="1"
      accept=".json"
      :file-list="fileList"
      :on-success="successHandle"
      :before-upload="beforeUpload"
      :auto-upload="false"
      style="text-align: center;">
      <i class="el-icon-upload"></i>
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    </el-upload>

  </el-dialog>
  <el-table :data="schedList" border style="width: 100%"  :stripe="true"  fit :cell-style="{ background:'#0059fc',color:'#67f300' }" :header-cell-style="{ background: '#09ea03' }" >
    <el-table-column
      type="selection"
      header-align="center"
      align="center"
      width="50">
    </el-table-column>

    <el-table-column
    label="排产标识"
    align="center"
    >
    </el-table-column>
    <el-table-column
    label="排产文件名称"
    align="center"
    >
    </el-table-column>
    <el-table-column
    label="排程模型标识"
    align="center"
    >
    </el-table-column>

    <el-table-column
    label="创建时间"
    align="center"
    >
    </el-table-column>
    <el-table-column
      label="操作"
      align="center"
    >
    </el-table-column>



  </el-table>


  </div>
</template>

<script>
export default {
  name: 'qunee-upload',
  data () {
    return {
      schedList: [],
      input: null,
      url: '',
      dataForm: [],
      visible: false,
      successNum: 0,
      num: 0,
      fileList: [],
      progressPercent: 0,
      file: {}
    }
  },

  methods: {
    change (input) {
      if (this.input) {
        this.input = input
      }
    },
    submitUpload () {
      console.log(this.input)
      this.url = this.$http.adornUrl(`/business/Project3/getOriginalSchedule/${this.getId()}?token=${this.$cookie.get('token')}`)
      this.$refs.upload.submit()
    },

    getId () {
      return this.input
    },

    uploadHandle () {
      this.visible = true
    },
    closeHandle () {
      this.fileList = []
    },
    init () {
      // eslint-disable-next-line no-return-assign
      return this.url = this.$http.adornUrl(`/business/Project3/getOriginalSchedule/${this.getId()}?token=${this.$cookie.get('token')}`)
    },
    successHandle (response, file, fileList) {
      this.fileList = fileList
      this.successNum++
      if (response && response.code === 0) {
        this.input = ''
        if (this.num === this.successNum) {
          this.$confirm('操作成功, 是否继续操作?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(() => {
            this.visible = false
          })
        }
      } else {
        this.$message.error(response.data)
      }
    },

    beforeUpload (file) {
      // 类型判断
      // 大小判断

      const is1024M = file.size / 1024 / 1024 < 1024
      if (!is1024M) {
        // 大小不匹配
        this.$message.error('上传文件大小不能超过 1GB !')
        return false
      }
      // 返回 false 阻断 true 正常上传

      // eslint-disable-next-line no-unused-vars
      var isInput = true
      if (this.input == null) {
        isInput = false
        this.$message.error('排产标识文件未填写')
        return false
      }
      file['Id'] = this.input
      console.log(file)
      this.num++
    }

  },
  created () {
    this.init()
  }

}
</script>

<style scoped>

</style>
